<!DOCTYPE html>
<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>传智健康</title>
        <meta name="description" content="传智健康">
        <meta name="keywords" content="传智健康">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../css/style.css">
        <!-- 引入组件库 -->
        <script type="text/javascript" src="../js/jquery.min.js"></script>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <script src="../js/axios-0.18.0.js"></script>

    </head>
    <body class="hold-transition">
        <div id="app">
            <div class="content-header">
                <h1>套餐管理<small>视频管理</small></h1>
                <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>套餐管理</el-breadcrumb-item>
                    <el-breadcrumb-item>视频管理</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <el-upload
                    :on-success="VodUploadSuccess"
                    class="upload-demo"
                    action="http://localhost:82/eduvod/video/uploadAlyiVideo.do"
                    :on-remove="handleVodRemove"
                    :before-remove="beforeVodRemove"
                    :on-exceed="handleUploadExceed"
                    multiple
                    :limit="1"
                    :file-list="fileList">
                <el-button size="small" type="primary">点击上传套餐视频</el-button>
                <div slot="tip" class="el-upload__tip">最大支持1G，<br>
                    支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br>
                    GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br>
                    MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br>
                    SWF、TS、VOB、WMV、WEBM 等视频格式上传</div>
            </el-upload>
            <el-button size="small" type="primary" @click="addVedio">确定</el-button>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="视频id"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="videooriginalname"
                        label="原始文件名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="videosourceid"
                        label="云端视频资源">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="handleWatchVideo(scope.row)">查看</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
    </body>
    <script>



        var vue = new Vue({
            el: '#app',
            data:{
                fileList: [],//上传文件列表
                video:{},
                tableData:[],
                setmealId:'',
                VideoUrl:''

            },
            created() {
                function getUrlParam(paraName) {
                    //doucment.location 显示当前的url地址
                    var url = document.location.toString();
                    //alert(url);
                    //以?分割
                    var arrObj = url.split("?");
                    if (arrObj.length > 1) {
                        var arrPara = arrObj[1].split("&");
                        var arr;
                        for (var i = 0; i < arrPara.length; i++) {
                            arr = arrPara[i].split("=");
                            if (arr != null && arr[0] == paraName) {
                                return arr[1];
                            }
                        }
                        return "";
                    }
                    else {
                        return "";
                    }
                }

                var id = getUrlParam("setmealId");
                console.log(id);
                  this.setmealId =id
                   console.log(this.setmealId)
                this.getVoidTable(id);
            },
            methods: {
               //添加视频
                addVedio(){
                    this.video.setmeal_id=this.setmealId
                  axios.post("/eduvod/video/addVideo.do",this.video).then((res)=>{

                  })
                },
                //获取套餐内视频管理数据
                getVoidTable(id){
                  axios.get(`/setmeal/getAllVoidTable/${this.setmealId}.do`).then((res)=>{
                    this.tableData=res.data.data
                      console.log("method"+id)
                      this.setmealId=id
                  })
                },
                //文件上传成功时的钩子
                VodUploadSuccess(response,file,fileList){
                    console.log(file)
                    this.video=file.response.data
                    console.log(this.video)

                },
                //文件列表移除文件时的钩子
                handleVodRemove(file, fileList){

                },
                //删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。
                beforeVodRemove(file, fileList){
                    return   this.$confirm(`确认删除 ${file.name}?`)
                },
                //文件超出个数限制时的钩子
                handleUploadExceed(files, fileList){
                    this.$message.warning('想要重新上传视频，请先删除已上传的视频')
                },
             //查看视频
                handleWatchVideo(row){
                    window.location.href=row.voidurl
                },
                //删除视频
                handleDelete(id){

                },

            }
        })
    </script>
</html>
